<template>
  <view class="user-index">
    <nav-bar backgroundColor="#115baa" :leftSlot="true">
      <template slot="leftSlot">
        <view class="left-box">
          <image
            class="left-img"
            :src="baseIconUrl + '/commonIcon/icon_about_logo.png'"
          />武汉市青少年脊柱健康技术中心
        </view>
      </template>
    </nav-bar>
    <scroll-view scroll-y :style="{ height: scrollHeight }">
      <view class="top-box">
        <you-search pageTitle="搜索" placeholder="请输入想要搜索的关键词" searchUrl="/subPages/searchPage/indexSearch"></you-search>
        <view class="swiper-box">
          <uni-swiper-dot
            class="uni-swiper-dot-box"
            @clickItem=clickSwiperItem
            :info="bannerList"
            :current="current"
            :mode="mode"
            :dots-styles="dotsStyles"
            field="content"
          >
            <swiper class="swiper-list" @change="swiperChange" :current="swiperDotIndex">
              <swiper-item v-for="(item, index) in bannerList" :key="index">
                <view class="swiper-item" :class="'swiper-item' + index">
                  <image
                    class="swiper-img"
                    :src="item.img"
                    mode="aspectFill"
                  />
                </view>
              </swiper-item>
            </swiper>
          </uni-swiper-dot>
        </view>
      </view>
      <view class="operate-box">
        <view
          class="operate-item"
          v-for="(item, index) in operateList"
          :key="index"
          @click="clickOperateItem(item)"
        >
          <view class="icon">
            <image
              class="icon-img"
              :src="`${baseIconUrl}/userIcon/${item.img}`"
            />
          </view>
          <view class="label">{{ item.label }}</view>
        </view>
      </view>
      <view class="service-box">
        <view class="service-title">{{ serviceTitle }}</view>
        <view class="service-list">
          <view
            class="service-item"
            v-for="(item, index) in serviceList"
            :key="index"
            @click="clickServiceItem(item)"
          >
            <view class="service-img">
              <image
                class="img"
                :src="item.imgUrl"
              />
            </view>
            <view class="service-name ellipsis-text">{{ item.title }}</view>
            <view class="left-label">精选</view>
          </view>
        </view>
      </view>
      <view class="mode-box">
        <view
          class="mode-item"
          v-for="(item, index) in modeList"
          :key="index"
          @click="clickOperateItem(item)"
        >
          <view class="name">{{ item.name }}</view>
          <view class="desc">{{ item.desc }}</view>
          <view class="bg-box">
            <image
              class="icon-img"
              :src="`${baseIconUrl}/userIcon/${item.bgImg}`"
            />
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="custom-service" @click="clickCustom">
      <image
        class="custom-img"
        :src="baseIconUrl + '/commonIcon/icon_custom_service.png'"
        mode="aspectToFill"
      />
    </view>
    <tab-bar :selectedIndex="0"></tab-bar>
  </view>
</template>

<script>
  import api_common from '@/api/common'
  import api_user from '@/api/user'
  import { baseUrl, baseImgUrl, baseIconUrl } from '@/config'
  export default {
    name: 'UserIndex',
    data() {
      return {
        scrollHeight: '',
        baseUrl,
        baseImgUrl,
        baseIconUrl,
        bannerList: [],
				swiperDotIndex: 0,
				current: 0,
				mode: 'round',
				dotsStyles: {
          backgroundColor: 'rgba(255, 255, 255, .5)',
          border: 'none',
          selectedBackgroundColor: '#FFF',
          selectedBorder: 'none'
        },
        operateList: [
          { label: '关于我们', icon: '', funcName: 'clickAboutUs', img: 'icon_index_company.png' },
          { label: '专家团队', icon: '', funcName: 'clickExpertTeam', img: 'icon_index_expert.png' },
          { label: '课程库', icon: '', funcName: 'clickVideoLibrary', img: 'icon_index_video.png' },
          { label: '免费筛查', icon: '', funcName: 'clickFreeScreening', img: 'icon_index_check.png' }
        ],
        serviceTitle: '脊柱侧弯整合系统',
        serviceList: [],
        modeList: [
          { name: '康复辅具', desc: '提供适合的辅具', bgImg: 'icon_index1.png', funcName: 'clickOrthoses' },
          { name: '会员专区', desc: '精选专业指导课程', bgImg: 'icon_index2.png', funcName: 'clickMember' },
          { name: '康复资讯', desc: '康复资讯一手掌握', bgImg: 'icon_index3.png', funcName: 'clickNewsInfo' },
          { name: '联系我们', desc: '请随时联系我们', bgImg: 'icon_index4.png', funcName: 'clickContractUs' }
        ]
      }
    },
    onShow() {
      uni.hideTabBar()
      this.scrollHeight = this.$store.getters.heightData.mainHeight + 'px'
      this.getBannerList()
      this.getSystemList()
      uni.setStorageSync('saveVideoList', null)
      uni.setStorageSync('videoScrollTop', 0)
      uni.setStorageSync('videoPageNum', 1)
    },
    methods: {
      getBannerList() {
        api_common.fetchBannerList().then(res => {
          if (res.code !== 200) return
          this.bannerList = res.rows.map(item => {
            return {
              ...item,
              img: item.img.includes('http') ? item.img : this.baseUrl + item.img
            }
          })
        })
      },
      swiperChange(e) {
				this.current = e.detail.current
			},
      clickSwiperItem(e) {
				this.swiperDotIndex = e
			},
      // 获取整合系统数据
      getSystemList() {
        const params = {
          type: 2
        }
        api_user.fetchNewsList(params).then(res => {
          if (res.code !== 200) return
          this.serviceList = res.rows.map(item => {
            return {
              ...item,
              imgUrl: item.imgUrl && item.imgUrl.includes('http') ? item.imgUrl :
                      item.imgUrl ? this.baseUrl + item.imgUrl : ''
            }
          })
        })
      },
      clickServiceItem(item) {
        uni.navigateTo({ url: `/subPages/userIndex/newsInfo/newsInfoDetail?id=${item.id}` })
      },
      clickOperateItem(item) {
        if (!item.funcName) return
        this[item.funcName]()
      },
      clickAboutUs() {
        uni.navigateTo({ url: '/subPages/commonPage/settingPage/aboutUs' })
      },
      clickExpertTeam() {
        uni.navigateTo({ url: '/subPages/userIndex/expertTeam/expertTeamList' })
      },
      clickVideoLibrary() {
        uni.navigateTo({ url: '/subPages/userIndex/videoLibrary/videoList' })
      },
      clickFreeScreening() {
        uni.navigateTo({ url: '/subPages/userIndex/freeScreening/index?title=免费筛查' })
      },
      clickOrthoses() {
        uni.navigateTo({ url: '/subPages/userIndex/rehabilitationAids/orthosesList' })
      },
      clickMember() {
        uni.navigateTo({ url: '/subPages/userIndex/memberCenter/activateMember?activeCard=1' })
      },
      clickNewsInfo() {
        uni.navigateTo({ url: '/subPages/userIndex/newsInfo/newsInfoList' })
      },
      clickContractUs() {
        uni.navigateTo({ url: '/subPages/userIndex/contractUs/contractUsDetail' })
      },
      clickCustom() {
        uni.navigateTo({ url: '/subPages/userIndex/freeScreening/index?title=在线客服' })
      }
    }
  }
</script>
<style lang="scss">
  .user-index {
    background-color: #F8F8F8;
  }
  .left-box {
    display: flex;
    align-items: center;
    margin-left: 14rpx;
    color: #FFF;
    .left-img {
      width: 48rpx;
      height: 48rpx;
      margin-right: 8rpx;
    }
  }
  .top-box {
    background: linear-gradient(180deg, #115baa 0%, #f8f8f8 100%);
    .swiper-box {
      height: 320rpx;
      padding: 0 30rpx;
      border-radius: 32rpx;
      overflow: hidden;
      .swiper-list {
        width: 100%;
        height: 320rpx;
        border-radius: 32rpx;
        overflow: hidden;
        .swiper-item {
          width: 100%;
          height: 320rpx;
          border-radius: 32rpx;
          overflow: hidden;
          .swiper-img {
            width: 100%;
            height: 100%;
            border-radius: 32rpx;
          }
        }
      }
    }
  }
  .operate-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 30rpx;
    padding: 24rpx 0;
    border-radius: 16rpx;
    background-color: #FFF;
    .operate-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .icon {
        width: 90rpx;
        height: 90rpx;
        border-radius: 16rpx;
        margin-bottom: 16rpx;
        .icon-img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .service-box {
    margin: 0 30rpx 30rpx;
    border-radius: 16rpx;
    background-color: #FFF;
    .service-title {
      padding: 30rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }
    .service-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 30rpx;
      .service-item {
        position: relative;
        width: 180rpx;
        margin-bottom: 30rpx;
        .service-img {
          width: 180rpx;
          height: 180rpx;
          border-radius: 16rpx;
          overflow: hidden;
          .img {
            width: 100%;
            height: 100%;
          }
        }
        .service-name {
          margin-top: 20rpx;
          font-size: 24rpx;
          color: #333;
        }
        .left-label {
          position: absolute;
          top: 0;
          left: 0;
          height: 40rpx;
          padding: 0 16rpx;
          line-height: 40rpx;
          border-radius: 16rpx 0 16rpx 0;
          font-size: 20rpx;
          color: #FFF;
          background-color: #FF8D1A;;
        }
      }
    }
  }
  .mode-box {
    padding: 0 30rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .mode-item {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 330rpx;
      height: 160rpx;
      padding: 0 30rpx;
      margin-bottom: 30rpx;
      border-radius: 16rpx;
      overflow: hidden;
      background-color: #FFF;
      z-index: 1;
      .name {
        margin-bottom: 12rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
      }
      .desc {
        font-size: 24rpx;
        color: #999;
      }
      .bg-box {
        position: absolute;
        z-index: -1;
        width: 170rpx;
        height: 160rpx;
        right: 0rpx;
        top: 8rpx;
        .icon-img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .custom-service {
    width: 96rpx;
    height: 96rpx;
    position: fixed;
    bottom: 270rpx;
    right: 16rpx;
    z-index: 9999;
    .custom-img {
      width: 100%;
      height: 100%;
    }
  }
</style>
